<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <input type="text" v-model="name" placeholder="请输入用户名">
            <input type="text" v-model="age" placeholder="请输入年龄">
            <button @click="addUser">提交</button>
        </div>
        <ul>
            <!-- 
                v-for 使用的时候一定要加上一个 key 属性，而且该 key 属性的值还是要是一个
                唯一的值，因为 vue 使用的是虚拟 DOM，当我们在前面增加内容的时候，会在虚拟
                DOM 的前面添加该内容，但是渲染成真实 DOM 后，原来标签的位置是不会改变的，
                只会在最后的位置新增一个标签，导致我们的内容真实 DOM 位置混乱。如果要解决该
                问题，可以使用 v-for 的时候添加一个唯一 key 属性，将虚拟 DOM 和真实 DOM
                进行绑定，这样的话就不会出现混乱问题。
             -->
            <!-- 
                index 是我们遍历的当前索引值，如果我们没有唯一的 key 值，可以将 index 
                作为遍历的 key 值
             -->
            <li v-for="(user,index) in userList" :key="user.name">
                <input type="checkbox" name="" id="">
                {{ user.name }} - {{ user.age }}
            </li>
        </ul>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                name: '',
                age: '',
                userList: []
            }
        },
        methods: {
            addUser() {
                console.log(this.name, this.age);
                this.userList.unshift({
                    name: this.name,
                    age: this.age
                })

                this.name = ''
                this.age = ''
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>